<template>
  <div>
    <div style="margin-bottom: 20px">
      <el-dropdown trigger="click" @command="handleCommand">
        <el-button type="primary" :disabled="route.query.name">
          {{ state.projectNames }}<el-icon class="el-icon--right"></el-icon>
        </el-button>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item
              v-for="item in state.selectList"
              :key="item.projectId"
              :command="item"
              >{{ item.projectName }}</el-dropdown-item
            >
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>
    <!--  项目基本信息    -->
    <blockComponents :msg="'基本信息'"></blockComponents>
    <div class="basicsInfo">
      <el-form
        :model="formInline"
        ref="formInlineRef"
        class="demo-form-inline"
        label-width="120px"
        :disabled="false"
      >
        <el-row>
          <el-col :span="8">
            <el-form-item label="项目名称">
              <el-input
                v-model="formInline.projectName"
                placeholder="项目名称"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="项目编号">
              <el-input
                v-model="formInline.projectName"
                placeholder="项目编号"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8" v-if="projectType != 3">
            <el-form-item label="任务来源">
              <el-input v-model="formInline.projectName" placeholder="" />
            </el-form-item>
          </el-col>
          <el-col :span="8" v-if="projectType != 3">
            <el-form-item label="关联项目集">
              <el-input v-model="formInline.projectName" placeholder="" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="关联项目集">
              <el-select v-model="formInline.projectName" placeholder="">
                <!-- <el-option v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option> -->
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="项目分类">
              <el-select v-model="formInline.projectName" placeholder="">
                <!-- <el-option v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option> -->
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="业务单元">
              <el-input v-model="formInline.businessUnit"> </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="计划实施时间范围">
              <el-input v-model="formInline.predictStartTime"> </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="项目位置">
              <el-input v-model="formInline.predictStartTime"> </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="项目详细地址">
              <el-input v-model="formInline.predictStartTime"> </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item class="col_h" label="拟计划总投额和实际总投额">
              <el-input v-model.number="formInline.predictStartTime">
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="项目类型" prop="projects">
              <el-input v-model="formInline.projectAmount"> </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="项目立项部门" prop="projects">
              <el-input v-model="formInline.projectAmount"> </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="项目负责人" prop="projects">
              <el-input v-model="formInline.projectAmount"> </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8" v-if="projectType != 3">
            <el-form-item label="任务来源" prop="projects">
              <el-input v-model="formInline.projectAmount"> </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8" v-if="projectType != 3">
            <el-form-item label="立项会议名称" prop="projects">
              <el-input v-model="formInline.projectAmount"> </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="项目摘要" prop="">
              <el-input v-model="formInline.projectAmount" type="textarea">
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="项目创建时间" prop="">
              <el-input v-model="formInline.projectAmount"> </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="项目创建人" prop="">
              <el-input v-model="formInline.projectAmount"> </el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>

    <blockComponents :msg="'项目阶段'"></blockComponents>
    <div class="project_jd">
      <div
        v-for="(v, i) in state.stageList"
        :key="v.projectStageId"
        class="shu"
      >
        <div class="dividing" v-if="v.children.length > 0"></div>
        <div class="project_item">
          <div class="jd_info">{{ v.stageName }}</div>
          <div class="line_and_point">
            <div class="point"></div>
            <div class="line"></div>
          </div>

        </div>

        <!-- --------- -->
        <div v-if="v.children.length > 0">
          <div
            class="project_item"
            v-for="vv in v.children"
            :key="vv.projectStageId"
          >
            <div class="jd_info">{{ v.stageName }}</div>
            <div class="line_and_point">
              <div class="point"></div>
              <div class="line"></div>
            </div>

          </div>
        </div>
      </div>
    </div>

    <blockComponents :msg="'阶段内容'"></blockComponents>
    <el-tabs @tab-click="handleClick" v-model="state.activeName">
      <el-tab-pane label="会议信息" :name="0"></el-tab-pane>
      <el-tab-pane label="质量监督" :name="1"></el-tab-pane>
      <el-tab-pane label="资料成果" :name="2"></el-tab-pane>
    </el-tabs>
    <tableIndex
      :tableData="state.tableData[state.activeName]"
      :tableHead="state.tableHead[state.activeName]"
      :isIndex="true"
      :height="'500'"
      :fields="state.fields[state.activeName]"
      :page="state.page"
      @searchList="searchList"
      @page-change="pageChange"
    >
      <template #operate>
        <el-table-column label="操作" width="200" align="center" fixed="right">
          <template #default="{ row }">
            <el-button
              v-if="state.activeName != 2"
              size="small"
              class="look"
              type="primary"
              @click="lookHandler(row)"
              >查看</el-button
            >
            <el-button
              v-else
              size="small"
              class="look"
              type="primary"
              @click="downHandler(row)"
              >下载</el-button
            >
          </template>
        </el-table-column>
      </template>
    </tableIndex>
    <div style="text-align: center">
      <el-button size="small" class="update" @click="goback(row)" type="primary"
        >关闭</el-button
      >
    </div>
  </div>

  <!-- 质量监督 -->
  <DrawerNanme ref="DrawerNanmeRef"></DrawerNanme>

  <!-- 会议弹框 -->
  <profercenceDialog
    ref="profercencedialog"
    :isShow="false"
  ></profercenceDialog>
</template>
<script setup>
import '@/views/constructionProjectManage/static/button.scss'
import TableIndex from '@/components/table/index.vue'
import { ref, reactive, onMounted, computed } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import blockComponents from '@/components/block_components/index.vue'
import DrawerNanme from '@/views/constructionProjectManage/project_mt/components/DrawerNanme.vue'
import profercenceDialog from '@/views/constructionProjectManage/mytobeDone/components/profercenceDialog.vue'
import { getURLhandler } from '@/views/constructionProjectManage/static/utools.js'

import {
  projectApi,
  projectListApi,
  projectConfigApi,
  qualitySupervision
} from '@/api/project'
import {
  ElDialog,
  ElButton,
  ElTabPane,
  ElTabs,
  ElIcon,
  ElForm,
  ElDropdown,
  ElDropdownItem,
  ElFormItem,
  ElDropdownMenu,
  ElRow,
  ElCol
} from 'element-plus'

//路由跳转
let router = useRouter()
let route = useRoute()
const projectType = getURLhandler(route.path).projectType
const state = reactive({
  //  0 会议  1 质量 2资料
  activeName: 0,
  projectNames: '项目名称选择',
  page: {
    page: 1,
    pageSize: 10,
    total: 0
  },
  fields: [
    // 会议
    [
      { key: 'meetingName', label: '会议名称', type: 'input' },
      {
        key: 'status',
        label: '会议类型',
        type: 'select',
        options: {
          list: [
            {
              label: '全部',
              value: ''
            },
            {
              label: '未开工',
              value: -2
            },
            {
              label: '停工',
              value: -1
            },
            {
              label: '竣工',
              value: 1
            },
            {
              label: '其他',
              value: 2
            },
            {
              label: '已立项项目',
              value: 3
            }
          ]
        }
      }
    ],
    // 质量监督
    [
      {
        key: 'dealDepartmentId',
        label: '处理部门',
        type: 'select',
        options: {
          list: [
            {
              label: '全部',
              value: ''
            },
            {
              label: '未开工',
              value: -2
            },
            {
              label: '停工',
              value: -1
            },
            {
              label: '竣工',
              value: 1
            },
            {
              label: '其他',
              value: 2
            },
            {
              label: '已立项项目',
              value: 3
            }
          ]
        }
      }
    ],
    // 资料成果
    [
      { key: 'projectName', label: '文件名称', type: 'input' },
      { key: 'projectName', label: '时间', type: 'input' }
    ]
  ],

  selectList: [],
  stageList: [],
  tableData: [[], [], []],
  tableHead: [
    // 会议
    [
      {
        prop: 'meetingName',
        label: '会议名称'
      },
      {
        prop: 'typeName',
        label: '会议类型'
      },
      {
        prop: 'participants',
        label: '参会人员'
      },
      {
        prop: 'meetingTime',
        label: '会议时间'
      },
      {
        prop: 'status',
        label: '会议结果',
        formatter: (row) => {
          return row.status ? (row.status == -1 ? '通过' : '驳回') : '-'
        }
      },
      {
        prop: 'createUserId',
        label: '发起人'
      }
    ],
    // 质量
    [
      {
        prop: 'projectName',
        label: '项目名称'
      },
      {
        prop: 'problemCategory',
        label: '问题分类'
      },
      {
        prop: 'problemType',
        label: '问题类型'
      },
      {
        prop: 'dealStatus',
        label: '状态',
        formatter: (row) => {
          let str = ''
          switch (row.dealStatus) {
            case -1:
              str = '待处理'
              break
            case 1:
              str = '处理中'
              break
            case 2:
              str = '已处理'
              break
            case 3:
              str = '已关闭'
              break
            default:
              str = '-'
              break
          }
          return str
        }
      },
      {
        prop: 'applyUserName',
        label: '发起责任人'
      },
      {
        prop: 'problemDescription',
        label: '问题描述'
      },
      {
        prop: 'dealDepartmentName',
        label: '处理部门'
      },
      {
        prop: 'dealUserName',
        label: '处理人'
      },
      {
        prop: 'deadline',
        label: '截止完成时间'
      },
      {
        prop: 'createTime',
        label: '创建时间'
      }
    ],
    // 资料成果
    [
      {
        prop: 'userName',
        label: '上传人姓名'
      },
      {
        prop: 'fileName',
        label: '文件名'
      },
      {
        prop: 'fileName',
        label: '文件类型',
        formatter: (row) => {
          return row.fileName.match(/\.(\w+)$/)[1]
        }
      },

      {
        prop: 'createTime',
        label: '上传时间'
      }
    ]
  ]
})

let formInlineRef = ref(null)
const formInline = reactive({})

const pageChange = (e) => {
  state.page = e.page
  state.pageSize = e.limit
  //  0 会议  1 质量 2资料
  if (state.activeName == 0) {
    getConferencePage()
  }
  if (state.activeName == 1) {
    getSupervisionPage()
  }
  if (state.activeName == '2') {
    getFilePageList()
  }
}

//通过ID获取详情
const getByidHandler = async (id) => {
  await projectApi.getByidProjects(id).then((res) => {
    const { code, data, msg } = res
    if (code == 200) {
      state.selectList = data.projects
    }
  })
}
const handleCommand = async (e) => {
  await projectListApi.getprojectByid(e.projectId).then((res) => {
    console.log(res)
    const { code, data, msg } = res
    if (code == 200) {
      state.projectNames = res.data.projectName || ''
      Object.assign(formInline, data)
    }
  })
}
const goback = (row) => {
  alert(1)
}
const handleClick = (e) => {
  //  0 会议  1 质量 2资料
  // if (state.activeName == "0") {
  // 	getConferencePage();
  // }
  // if (state.activeName == 1) {
  // 	getSupervisionPage();
  // }
  // if (state.activeName == '2') {
  //   getFilePageList();
  // }
}
// 项目阶段
const getStage = (id, falg = false) => {
  projectConfigApi.getStage(id).then((res) => {
    if (res.code == 200) {
      if (falg) {
      }
      console.log(res)
      state.stageList = res.data
    }
  })
}
//搜索查询
const searchList = (e) => {
  //  0 会议  1 质量 2资料
  if (state.activeName == '0') {
    getConferencePage(e)
  }

  if (state.activeName == 1) {
    getSupervisionPage(e)
  }
  if (state.activeName == 2) {
    getFilePageList()
  }
}
// 会议信息
const getConferencePage = (e) => {
  projectConfigApi
    .getConferencePage({
      pageNum: state.page.page,
      pageSize: state.page.pageSize,
      param: {
        projectId: getURLhandler(route.path).id,
        ...e
      }
    })
    .then((res) => {
      const { data, code, msg } = res
      if (code == 200) {
        state.tableData[0] = data.content
        state.page.total = data.totalSize
      }
    })
}
// 质量监督
const getSupervisionPage = (e) => {
  qualitySupervision
    .getPage({
      pageNum: state.page.page,
      pageSize: state.page.pageSize,
      param: {
        projectId: getURLhandler(route.path).id,
        ...e
      }
    })
    .then((res) => {
      const { data, code, msg } = res
      if (code == 200) {
        state.tableData[1] = data.content
        state.page.total = data.totalSize
      }
    })
}
// 资料成果  接口暂无
const getFilePageList = (e) => {
  projectConfigApi
    .getFilePageList({
      pageNum: state.page.page,
      pageSize: state.page.pageSize,
      param: {
        projectId: getURLhandler(route.path).id,
        ...e
      }
    })
    .then((res) => {
      const { data, code, msg } = res
      if (code == 200) {
        state.tableData[2] = data.content
        state.page.total = data.totalSize
      }
    })
}
const DrawerNanmeRef = ref(null)
const profercencedialog = ref(null)

// 查看
const lookHandler = (e) => {
  // 会议 0  质量监督 1
  if (state.activeName == 0) {
    profercencedialog.value.open(e.id)
  } else {
    DrawerNanmeRef.value.state.centerDialogVisible = true
    DrawerNanmeRef.value.state.qualityProblemId = e.qualityProblemId
    DrawerNanmeRef.value.state.dealStatus = e.dealStatus
  }
}
// 下载
const downHandler = (row) => {}

defineExpose({
  state
})
onMounted(() => {
  // state.projectNames = getURLhandler(route.path).name || "";
  // getByidHandler(route.query.id);

  getStage(getURLhandler(route.path).id)

  /* 表单初始化 */
  getConferencePage()
  getSupervisionPage()
  getFilePageList()

  /* 基本信息初始化 正式项目看板 */
  if (getURLhandler(route.path).name) {
    handleCommand({
      projectId: getURLhandler(route.path).id
      // projectName: getURLhandler(route.path).name,
    })
  }
})
</script>
<style lang="scss" scoped>
.el-select {
  width: 50%;
}
.select_project {
  width: 100%;
}
.buttons {
  text-align: center;
}
.twoline {
  display: flex;
  .el-form-item {
    width: 100%;
    display: flex;
    justify-content: space-between;
    .el-select {
      width: 50%;
    }
  }

  justify-content: space-between;
}
.oneline {
  .el-form-item {
    width: 50%;
  }
}
.el-dropdown-menu {
  width: 200px;
}
.basicsInfo {
  margin-top: 20px;
}
.line_and_point {
  margin-bottom: 30px;
  display: flex;
  align-items: center;
  padding-top: 15px;
  .point {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #fc7018;
  }
  .line {
    margin-left: 10px;
    margin-right: 10px;
    width: 224px;
    height: 2px;
    border: 1px solid #fc7018;
  }
}
.shu {
  position: relative;
  .dividing {
    position: absolute;
    top: 50%;
    left: 0px;
    width: 2px;
    height: 50%;
    background-color: #fc7018;
    transform: translateY(-48%);
  }
}
.project_jd {
  min-height: 200px;
  width: 100%;
  margin-bottom: 30px;
  display: flex;
  // flex-wrap: wrap;
  align-items: center;
  overflow-x: auto;
  padding-bottom: 20px;
  .project_item {
    // background-color: #999;
    padding: 10px;
    .jd_info {
      margin-top: 30px;
      width: 134px;
      line-height: 32px;
      color: #fff;
      text-align: center;
      margin-left: 30px;
      height: 32px;
      background: #d4ae85;
      border-radius: 16px;
    }
    .jd_time {
      margin-top: 20px;
      margin-left: 30px;
    }
  }
}
.el-select {
  width: 100%;
}
.col_h :deep(.el-form-item__label) {
  line-height: 20px !important;
  text-align: right;
}
</style>
